<!DOCTYPE HTML>
<html>
<head>
    {include file="common:meta"}

    <style>
        .count-txt{
            text-align: center;
            font-size: 15px;
            font-weight: bold;
        }
        .content-color{
            color: blue;
        }
    </style>
</head>

<body>
<div class="page-container">
    <div class=" float-e-margins">
        <div class="ibox-content">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">规则列表</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class=" tab-pane active" id="tab-1">
                        <form action="" class="form-inline" data-url="">
                            <div class="form-group">
                                <label class="control-label" for="key">选项:</label>
                                <select id="time" class="form-control" name="key">
                                    <option value="create_time">创建时间</option>
                                    <option value="receive_time">领取时间</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="control-label">
                                    <label class="control-label">开始时间：
                                        <input type="text" class="form-control date-search" id="start_time" placeholder="">
                                    </label>
                                </label>
                            </div>
                            <div class="form-group">
                                <label class="control-label">
                                    <label class="control-label">结束时间：
                                        <input type="text" class="form-control date-search" id="end_time" placeholder="">
                                    </label>
                                </label>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="key">选项:</label>
                                <select id="key" class="form-control" name="key">
                                    <option value="recive_user_id">红包接收者ID</option>
                                    <option value="companion_id">匹配对方ID</option>
                                    <option value="status">红包领取状态</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="value">输入:</label>
                                <input class="form-control" id="value" type="text" name="value">
                            </div>
                            <button type="button" class="btn btn-primary" id="eventQuery">查询</button>
                            <button type="button" onclick="location.replace(location.href);" class="btn btn-success ">刷新</button>
                        </form>
                        <div class="count-txt">红包记录总数：<span class="content-color" id="record_count"></span>钻石总数：<span class="content-color" id="diamonds_count"></span>成功领取钻石数：<span class="content-color" id="success_count"></span></div>
                        <table id="tb_departments"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="common:footer"}
<script>
    $(document).ready(function () {
        initTable();
        countData();
    });

    function initTable() {
        $('#tb_departments').bootstrapTable({
            url: '/PacketRecordIndexData',         //请求后台的URL（*）
            dataField: "data",
            method: 'get',                      //请求方式（*）
            striped: true,                      //是否显示行间隔色
            cache: true,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            queryParams: queryParams,//传递参数（*）
            showToggle: true,
            showRefresh: true,
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            showColumns: true,                  //是否显示所有的列
            showPaginationSwitch: true,
            minimumCountColumns: 2,             //最少允许的列数

            columns: [{
                field: 'id',
                title: 'ID',
                sortable: true
            },{
                field: 'diamonds',
                title: '钻石总数量'
            },{
                field: 'recive_user_id',
                title: '红包接收者ID'
            },{
                field: 'companion_id',
                title: '速配对方ID'
            },{
                field: 'status',
                title: '红包领取状态',
                formatter: function (value, row, index) {
                    if(row.status===0) return '未领取';
                    if(row.status===1) return '已领取';
                }
            },{
                field: 'create_time',
                title: '创建时间'
            },{
                field: 'receive_time',
                title: '领取时间'
            }]
        });
    }
    //得到查询的参数
    function queryParams(params) {
        params.offset = params.offset / params.limit + 1;
        params.key = $('#key').val();
        params.value = $('#value').val();
        params.time = $('#time').val();
        params.start_time = $('#start_time').val();
        params.end_time = $('#end_time').val();
        console.log(JSON.stringify(params));
        return params;
    }

    function countData(){
        var datas = {
            key : $('#key').val(),
            value : $('#value').val(),
            time : $('#time').val(),
            start_time : $('#start_time').val(),
            end_time : $('#end_time').val()
        };
        $.ajax({
            type:'get',
            url:'/PacketRecordCountData',
            data:datas,
            dataType:'json',
            success:function(re){
                if(re.code === 100){
                    console.log(re);
                    $('#record_count').text(re.data.record_count);
                    $('#diamonds_count').text(re.data.diamonds_count);
                    $('#success_count').text(re.data.success_count);
                }
            },
            error:function(err){
                layer.msg('服务器开小差了！',{
                    time:2000
                });
            }
        });

    }



    //时间搜索插件
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        lay('.date-search').each(function () {
            laydate.render({
                elem: this,
                type: 'datetime',
                trigger: 'click',
                format: 'yyyy-MM-dd HH:mm:ss'
            });
        });
    });
    // 搜索按钮触发事件
    $(function () {
        $("#eventQuery").click(function () {
            $('#tb_departments').bootstrapTable(('refresh'));	// 很重要的一步，刷新url！
            countData();
        });

    });
</script>
</body>
</html>
</html>